<template>
  <md-nav-bar title="音乐人详情" />
  <div class="contanier">
    <!-- 头像和昵称 -->
    <view class="profile-section">
      <image class="avatar" :src="data.memberUser.avatar" />
      <text class="name">{{ data.memberUser.nickname }}</text>
    </view>

    <!-- Tab 切换 -->
    <view class="tabs">
      <view
        v-for="(tab, idx) in tabs"
        :key="tab"
        :class="['tab', { active: currentTab === idx }]"
        @click="currentTab = idx">
        {{ tab }}
      </view>
    </view>

    <!-- 音乐列表 -->
    <view class="music-list-wrap flex-1">
      <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true" bottom="80px">
        <view v-if="currentTab === 0" class="music-list">
          <view
            v-for="(music, idx) in data.musicList"
            :key="music.name"
            class="music-item"
            @click="() => onToMusicDetail(music)">
            <text class="index">{{ (idx + 1).toString().padStart(2, '0') }}</text>
            <image class="cover" :src="music.coverUrl" />
            <view class="info">
              <view class="title-row">
                {{ music.name }}
              </view>
              <text class="date">{{ music.createTime }}</text>
            </view>
          </view>
        </view>
        <!-- 个人简介 -->
        <view v-if="currentTab === 1" class="music-introduction">
          {{ data.memberUser?.introduction }}
        </view>
      </mescroll-body>
    </view>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onPageScroll, onReachBottom, onLoad, onShow } from '@dcloudio/uni-app';
// 组件
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
// 接口
import api from '@/api';
import type { Music } from '@/api/data';

const data = reactive({
  canReset: false,
  memberId: null,
  musicList: [] as Music.GetMusicMember.List[],
  memberUser: {} as Music.GetMusicMember.MemberUser, // 音乐人信息
});

const tabs = ['音乐', '简介'];
const currentTab = ref(0);

// 跳转音乐详情
const onToMusicDetail = (obj: any) => {
  uni.navigateTo({
    url: '/pages/sub/square/musicDetail?id=' + obj.id,
  });
};

/**
 * 接口相关
 */
// 分页处理
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll: any) => {
  try {
    let res = await api.Music.getMusicMember({
      memberId: data?.memberId || -1,
      pageNo: mescroll.num,
      pageSize: mescroll.size,
    });
    data.memberUser = res?.data?.memberUser || {}; // 音乐人信息
    const curPageData = res?.data?.musicList?.list || []; // 当前页数据
    if (mescroll.num == 1) data.musicList = []; // 第一页需手动制空列表
    data.musicList = data.musicList.concat(curPageData); //追加新数据
    mescroll.endByPage(curPageData.length, res?.data?.musicList.total);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};

onLoad((options: any) => {
  data.memberId = options.id || 0; // 获取传入的音乐人ID
});

onShow(() => {
  data.canReset && getMescroll().resetUpScroll(); // 重置列表数据为第一页
  data.canReset && getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
  data.canReset = true; // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
});
</script>
<style lang="scss" scoped>
.contanier {
  height: 100vh;
  background-color: #01604a;
  padding-top: 105rpx;
  display: flex;
  flex-direction: column;

  .profile-section {
    display: inline-block;
    height: 153rpx;
    width: 100%;
    align-items: center;
    background: #ffffff;
    position: relative;
    text-align: center;
    border-radius: 32px 32px 0 0;
    padding-top: 80rpx;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-bottom: 8rpx;
      position: absolute;
      top: -60rpx;
      left: calc(50% - 60rpx);
    }
    .name {
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  .tabs {
    display: flex;
    justify-content: flex-start;
    margin-top: -1rpx;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    .tab {
      font-size: 18px;
      margin: 0 24px;
      padding-bottom: 24rpx;
      position: relative;
      color: #888;
      &.active {
        color: #222;
        font-weight: bold;
        border-bottom: 3px solid #008466;
      }
    }
  }
  .music-list-wrap {
    background: #ffffff;
    padding-top: 10px;
  }
  .music-list {
    .music-item {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f2f2f2;
      .cover {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12px;
        margin: 0 16px;
      }
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        .index {
          font-size: 16px;
          color: #bbb;
          margin-bottom: 2px;
        }
        .title-row {
          font-size: 16px;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 460rpx;
        }
        .date {
          font-size: 14px;
          color: #888;
          margin-top: 2px;
        }
      }
    }
  }
  .music-introduction {
    padding: 24rpx;
    box-sizing: border-box;
  }
}
</style>
